<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image>
		<hx-navbar :title="info.item.name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="container">
			<view class="collect_img_box">
				<view class="imgCont">
					<image :src="info.item.image" mode="aspectFill" class="collect_image"></image>
					<!-- <iframe :src="info.url" v-if="info.type == 1" class="collect_image" frameborder="0"></iframe> -->
				</view>
				<image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image>
			</view>
			<view class="goods_name_box">
				<view class="price_box">
					<view class="price">
						<text style="font-size: 30rpx">￥</text>{{info.price|fp}}
						<!-- 	<view class="other color-9" @tap="back">
							其他寄售
							<n-icon name="right" size="#999"></n-icon>
						</view> -->
					</view>
					<view class="goods_name">
						<view class="goods_name_info">
							<!-- <image class="goods_name_info_bg" src="/static/detail/goods-info-img.png" mode="widthFix"></image> -->
							<view class="cell-item-cb">
								<view class="goods_name_text">
									{{item.name}}
								</view>
							</view>
							<view class="nums_box">
								<view class="data">
									<view class="label">限量</view>
									<view class="num">{{item.quantity}}份</view>
								</view>
								<view class="data">
									<view class="label">流通</view>
									<view class="num">{{item.nftQuantity}}份</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="details_box">
				<view class="authorWrap">
					<view class="item">
						<view class="intro">
							<image class="title" src="/static/detail/author_title1.png" mode="scaleToFill"></image>
							<view class="user">
								<image class="avatar" src="/static/logo.jpg" mode="scaleToFill"></image>
								<text>冰clod文创</text>
							</view>
						</view>
						<image class="icon" src="/static/detail/detail_icon.png" mode="scaleToFill"></image>
					</view>
					<view class="item">
						<view class="intro">
							<image class="title" src="/static/detail/author_title2.png" mode="scaleToFill"></image>
							<view class="user">
								<image class="avatar" :src="author.avatar" mode="aspectFill"></image>
								<text>{{author.nickname}}</text>
							</view>
						</view>
						<image class="icon" src="/static/detail/detail_icon.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="block_info">
					<view class="block_item">
						<view class="block_label">商品编号</view>
						<!-- <view class="block_icon">
							<text>查看寄售记录</text>
							<image src="/static/user/arrow_right.png" mode="scaleToFill"></image>
						</view> -->
						<view class="block_value">#{{info.tokenId}}</view>
					</view>
				</view>
				<view class="block_info">
					<view class="block_item">
						<view class="block_label">所属专辑</view>
						<view class="block_value">{{category.name}}</view>
					</view>
					<view class="block_item">
						<view class="block_label">合约地址</view>
						<view class="block_value" @tap="copy(item.contract)">
							<view class="text">{{item.contract || '更新中'}}</view>
							<image class="icon" src="/static/detail/hash_copy.png" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="block_item">
						<view class="block_label">认证标识</view>
						<view class="block_value">{{info.tokenId}}</view>
					</view>
					<!-- <view class="block_item">
						<view class="block_label">拥有者</view>
						<view class="block_value">{{info.nickname}}</view>
					</view> -->
				</view>
				<view class="cont-box">
					<image class="article_tilte" src="/static/detail/title1.png" mode="widthFix"></image>
					<view class="content_box">
						<jshopContent :content="item.content" v-if="item.content"></jshopContent>
					</view>
				</view>
				<view class="cont-box">
					<image class="article_tilte" src="/static/detail/title2.png" mode="widthFix"></image>
					<rich-text class="xuzhi_content" :nodes="payText" ></rich-text>
				</view>
			</view>
			<image v-if="ktheme == 'purple'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot.png" mode="widthFix"></image>
			<image v-if="ktheme == 'black'" class="bot-img" style="margin-top: 20rpx;" src="/static/user/bot-black.png" mode="widthFix"></image>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="foot">
			<view class="price">
				￥{{info.price|fp}}
			</view>
			<view class="btn" v-if="info.payLock">锁单中</view>
			<view class="btn" @tap="confirm" v-else>立即购买</view>
		</view>
		<!-- <paypass ref="passbox" @confirm="confirm"></paypass> -->
	</view>
</template>

<script>
	import jshopContent from '@/components/jshop/jshop-content.vue' //视频和文本解析组件
	import paypass from '@/components/pay_pass/pay_pass.vue' //视频和文本解析组件
	export default {
		components: {
			jshopContent,
			paypass
		},
		data() {
			return {
				id: 0,
				info: {
					item:{
						image:''
					}
				},
				input_price: 0,
				item: {},
				author:{},
				category:{},
				list: [],
				page: 1,
				limit: 10,
				hasNextPage: true,

				count: 0,

				buy_sn: '',
				payText: '<p>数字科技商品为虚拟数字商品,而非实物,仅限实名认证为年满18周岁的中国大陆用户购买。数字科技商品的版权由发行方或原创者拥有，除另行取得版权拥有者书面同意外，用户不得将数字科技商品用于任何商业用途。本商品一经售出,不支持退换。本商品源文件不支持本地下载。请勿对数字科技商品进行炒作、场外交易、欺诈,或以任何其他非法方式进行使用。<br></p>',

			}
		},
		onLoad(options) {
			this.id = options.id;

			if (!this.id) {
				this.$common.errorToShow('商品失效')
				uni.navigateBack()
				return;
			}
			let userToken = this.$db.get("userToken");
			let data = {
				sn: this.id
			}
			if (userToken) {
				data.token = userToken;
			}
			this.$api.getCollectionDetails(this.id, res => {
				if (res.status) {
					this.info = res.data;
					this.$api.getGoodsDetails(res.data.iid, res=>{
						this.item = res.data
						this.author = this.info.author
						this.category = this.info.category
					})
				} else {
					this.$common.errorToShow(res.message, () => {
						uni.navigateBack()
					})
				}
			})
		},
		onPullDownRefresh() {
			this.$api.getGoodsDetails({
				id: this.id
			}, res => {
				if (res.status) {
					this.info = res.data;
				}
			})
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {
			copy: function(hash) {
				if (hash == "等待上链中") {
					this.$common.errorToShow("等待上链中");
					return;
				}
				uni.setClipboardData({
					data: hash,
					success: res => {
						this.$common.errorToShow('已复制剪贴板')
					}
				})
			},

			show_img: function() {
				let img = ''
				img = this.info.image;
				// #ifdef APP
				if (this.type == 1) {
					return;
				}
				// #endif
				uni.previewImage({
					urls: [this.info.image],
				})
			},
			close_goods_list: function() {
				this.$refs.goods_list.close()
			},

			on_buy: function(id, lock) {
				if (lock == 1) {
					return;
				}
				let item = this.list[id];

				uni.showModal({
					content: '确定购买这一个吗？',
					success: (res) => {
						if (res.confirm) {
							this.buy_sn = item.sn;
							this.$refs.goods_list.close();
							this.$api.checkSecondPassword({}, res => {
								if(res.status){
									let data = res.data
									if (data.secondPassword) {
										this.$refs.passbox.open();
									} else {
										this.$common.errorToShow('请设置交易密码', () => {
											uni.navigateTo({
												url: '/pages/user/settings/pay_pass/pay_pass'
											})
										});
									}
								}else{
									this.$common.errorToShow('网络异常');
								}
							})
						}
					}
				});
			},

			open_goods_list: function() {

				this.list = [];
				this.page = 1;
				this.hasNextPage = true;
				let data = {
					page: this.page,
					limit: this.limit,
					goods_id: this.info.goods_id
				}
				this.$api.getMarketGoodsList(data, res => {
					if (res.status) {
						this.list = res.data;
						this.count = res.count;
						this.$refs.goods_list.open();

						this.hasNextPage = res.data.length >= this.limit;
					}
				})
			},
			next_page: function() {
				if (this.hasNextPage) {
					let new_page = this.page + 1;
					let data = {
						page: new_page,
						limit: this.limit,
						goods_id: this.info.goods_id
					}
					this.$api.getMarketGoodsList(data, res => {
						if (res.status) {
							this.list = this.list.concat(res.data);
							this.hasNextPage = res.data.length >= this.limit;
							this.page = new_page
						}
					})

				}
			},

			// go_buy: function() {
			// 	this.$api.issetPayPass({}, res => {
			// 		if (res.status) {
			// 			this.$refs.passbox.open();

			// 		} else {
			// 			this.$common.errorToShow(res.msg, () => {
			// 				if (res.data == 0) {
			// 					uni.navigateTo({
			// 						url: '/pages/user/settings/pay_pass/pay_pass'
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// },


			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			confirm: function() {
				let source = 1
				// #ifdef APP
				source = 5
				// #endif
				// #ifdef H5
				source = 2
				// #endif
				// #ifdef MP
				source = 3
				// #endif
				let data = {
					nftId:this.id
					// pay_password: pass
				}
				this.$api.createMartOrder(data, res => {
					if (res.status) {
						let pay_data = res.data;
						this.$common.navigateTo('/pages/payment/index?order_id=' + res.data);
					} else {
						this.$common.errorToShow(res.message, () => {})
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/index/detail.scss";
	.foot {
		.price {
			font-size: 34rpx;
			color: #000;
			margin-right: 50rpx;
		}
	}
</style>